import * as echarts from 'echarts'
import { useEffect, useRef } from 'react'

const MyEcharts = ({title}) => {
    const chartRef = useRef(null)
    useEffect(()=>{
        //1.获取渲染图表的dom节点
        const chartDom = chartRef.current
        //2.图表初始化生成图表实例对象
        const myChart = echarts.init(chartDom)
        //3.准备图表参数
        const option = {
            title: {
                text:title
              },
              tooltip: {},
              xAxis: {
                data: ['VUE', 'REACT', 'ANGULAR']
              },
              yAxis: {},
              series: [
                {
                  name: '销量',
                  type: 'bar',
                  data: [5, 20, 36]
                }
              ]
        }
        //4.使用图表参数完成图表的渲染
        option && myChart.setOption(option)
    },[])
    return(
        <div ref={chartRef} style={{width:'400px',height:'400px'}}></div>
    )
}
export default MyEcharts